<template>
	<view class="home">
		<view class="text-32">会员充值请选择</view>
		<view class="flex flex-wrap margin-top-30">
			<view class="memberbtn flex align-center flex-direction justify-center" v-for="(item,index) in rechlist"
				:key="index" :class="rechid==item.id?'bg-1a text-ff':''" @click="rechid=item.id">
				<view class="text-24">充值 <text class="margin-left-10">￥</text> <text
						class="text-32 text-bold">{{item.recharge_amount}}</text> </view>
				<image :src="rechid==item.id?'/static/board/rech.png':'/static/board/rech_active.png'" mode=""
					class="rechimg margin-top-10"></image>
				<view class="songbtn margin-top-10" :class="rechid==item.id?'text-ff border-ff':'border-1a'">送￥{{item.bonus_amount}}
				</view>
			</view>
		</view>
		<view class="text-32 margin-top-30">购买月卡</view>
		<view class="flex flex-wrap margin-top-30">
			<view class="yuebtn flex align-center flex-direction justify-center" v-for="(item,index) in monthlist"
				:key="index" @click="choseMonths(item.id)">
				<image src="/static/board/vip.png" mode="" class="vipimg"></image>
				<view class="text-ff text-24 margin-top-5">购买{{item.months}}月月卡</view>
				<view class="text-24 text-ff margin-top-10">￥<text class="text-32 text-bold">{{item.price}}</text>
				</view>
				<view class="text-24 text-ff margin-top-10">畅玩{{item.usage_count}}次桌游</view>
			</view>
		</view>
		<view class="text-24 text-66 margin-top-30">备注内容备注内容备注内容备注内容备注内容备注</view>
		<view class="subbtn" @click="getPay">确认充值</view>
		<ty-tab-bar :tabnumber="'3'"></ty-tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rechlist: [],
				rechid: "",
				monthlist: []
			}
		},
		onReady() {
			this.rq.getData('Wechat/balance_recharge_list').then(res => {
				if (res.code == 1) {
					this.rechlist = res.data
				}
			})
			this.rq.getData('Wechat/card_recharge_list').then(res => {
				if (res.code == 1) {
					this.monthlist = res.data
				}
			})
		},
		methods: {
			getPay() {
				if (this.rechid == '') {
					this.cn.alert('请选择充值金额')
					return false
				}
				this.rq.getData('Wechat/balance_recharge', {
					id: this.rechid
				}).then(res => {
					if (res.code == 1) {
						this.cn.requestPayment({
							appId: res.data.payment.appId,
							nonceStr: res.data.payment.nonceStr,
							package: res.data.payment.package,
							paySign: res.data.payment.paySign,
							signType: res.data.payment.signType,
							timeStamp: res.data.payment.timeStamp,
						}, 1).then(res => {}).catch(res => {})
					}
				})
			},
			choseMonths(id) {
				this.rq.getData('Wechat/card_recharge', {
					id: id
				}).then(res => {
					if (res.code == 1) {
						this.cn.requestPayment({
							appId: res.data.payment.appId,
							nonceStr: res.data.payment.nonceStr,
							package: res.data.payment.package,
							paySign: res.data.payment.paySign,
							signType: res.data.payment.signType,
							timeStamp: res.data.payment.timeStamp,
						}, 1).then(res => {}).catch(res => {})
					}
				})
			}
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding: 40rpx 30rpx 288rpx;
	}

	.memberbtn {
		width: 208rpx;
		height: 224rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #999999;
		margin-right: 30rpx;
		margin-bottom: 25rpx;
	}

	.memberbtn:nth-child(3n) {
		margin-right: 0;
	}

	.rechimg {
		width: 68rpx;
		height: 68rpx;
	}

	.songbtn {
		width: 164rpx;
		height: 52rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-size: 28rpx;
		line-height: 52rpx;
		text-stroke: 0px #333333;
		text-align: center;
	}

	.border-1a {
		border: 2rpx solid #999999;
	}

	.yuebtn {
		width: 208rpx;
		height: 250rpx;
		background: #101010;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin-right: 35rpx;
		margin-bottom: 25rpx;
	}

	.yuebtn:nth-child(3n) {
		margin-right: 0;
	}

	.vipimg {
		width: 80rpx;
		height: 80rpx;
	}

	.subbtn {
		width: 100%;
		height: 88rpx;
		background: #101010;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(66, 66, 67, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin-top: 148rpx;
	}
</style>